<template>
  <div class="page-content">
    <el-row>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="addMenu('menu', '')"
        v-allow="'menu/add'"
      >
        新建
      </el-button>
    </el-row>

    <div class="table">
      <el-table
        lazy
        :data="tableData"
        style="width: 100%"
        row-key="id"
        size="medium"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :header-cell-style="{ color: '#666' }"
      >
        <el-table-column prop="title" label="菜单名称" />
        <el-table-column label="菜单类型">
          <template slot-scope="scope">
            <template v-if="scope.row.is_menu"> 菜单 </template>
            <template v-else> 功能点 </template>
          </template>
        </el-table-column>
        <el-table-column prop="path" label="路由" />
        <el-table-column prop="sort" label="排序" width="100" />
        <el-table-column prop="add_time" label="创建日期" />

        <el-table-column fixed="right" label="操作" width="200px">
          <template slot-scope="scope">
            <el-button
              v-show="scope.row.is_menu"
              type="text"
              icon="el-icon-edit"
              v-allow="'menu/edit'"
              @click="addMenu('menu', scope.row)"
            >
              添加
            </el-button>
            <el-button
              type="text"
              icon="el-icon-edit"
              v-allow="'menu/edit'"
              @click="editMenu(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="el-btn-red"
              v-allow="'menu/delete'"
              @click="deleteMenu(scope.row)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog title="编辑菜单" :visible.sync="dialogVisible" width="700px">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="85px"
      >
        <el-form-item label="菜单类型">
          <el-radio-group v-model="labelPosition">
            <el-radio-button label="menu">菜单</el-radio-button>
            <el-radio-button label="button">按钮</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <!--  菜单编辑-->
        <template v-if="labelPosition === 'menu'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上级菜单">
                <el-cascader
                  v-model="ruleForm.pid"
                  :options="menuArr"
                  :props="{ expandTrigger: 'click', checkStrictly: true }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单英文" prop="title_en">
                <el-input v-model="ruleForm.title_en"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="ruleForm.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限标识" prop="permission_mark">
                <el-input v-model="ruleForm.permission_mark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="图标" prop="icon">
                <!-- <el-input v-model="ruleForm.icon" type="hidden"></el-input> -->
                <template v-if="ruleForm.icon">
                  <icon-selector
                    @getIcon="getIcon"
                    :defaultIcon="ruleForm.icon"
                  ></icon-selector
                ></template>
                <template v-else>
                  <icon-selector @getIcon="getIcon" />
                </template>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单排序" prop="sort" style="width: 100%">
                <el-input-number
                  v-model="ruleForm.sort"
                  style="width: 100%"
                  @change="handleChange"
                  :min="1"
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <template v-if="!ruleForm.id">
            <el-row :gutter="20">
              <el-col :span="5">
                <el-form-item label="页面缓存" prop="keep_alive">
                  <el-switch v-model="ruleForm.keep_alive"></el-switch>
                </el-form-item>
              </el-col>
              <el-col :span="5">
                <el-form-item label="是否验证" prop="auth_verify">
                  <el-switch v-model="ruleForm.auth_verify"></el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </template>
        </template>
        <!-- 按钮编辑 -->
        <template v-if="labelPosition === 'button'">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="上级菜单">
                <el-cascader
                  v-model="ruleForm.pid"
                  :options="menuArr"
                  :props="{ expandTrigger: 'click', checkStrictly: true }"
                  @change="handleChange"
                ></el-cascader>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="菜单名称" prop="title">
                <el-input v-model="ruleForm.title"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单英文" prop="title_en">
                <el-input v-model="ruleForm.title_en"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="路由地址" prop="path">
                <el-input v-model="ruleForm.path"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="权限标识" prop="permission_mark">
                <el-input v-model="ruleForm.permission_mark"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="图标" prop="icon">
                <!-- <el-input v-model="ruleForm.icon" type="hidden"></el-input> -->
                <icon-selector @getIcon="getIcon" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="菜单排序" prop="sort" style="width: 100%">
                <el-input-number
                  v-model="ruleForm.sort"
                  style="width: 100%"
                  @change="handleChange"
                  :min="1"
                  controls-position="right"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </template>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">
          确 定
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { getMenuList, editMenu, getAllMenuTree } from "@/api/menuApi.js";
import IconSelector from "@/components/Icons/IconSelector";
export default {
  inject: ["reload"],
  components: {
    IconSelector,
  },
  data() {
    return {
      menuList: [],
      menuArr: [],
      tableData: [],
      dialogVisible: false,
      labelPosition: "menu",
      ruleForm: {
        id: 0,
        title: "",
        title_en: "",
        path: "",
        permission_mark: "",
        is_menu: 1,
        sort: 1,
        keep_alive: true,
        pid: 0,
        auth_verify: true,
        icon: "",
      },
      rules: {
        title: [
          { required: true, message: "请输入菜单名称", trigger: "blur" },
          //{ min: 3, max: 64, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
      },
    };
  },
  mounted() {
    let { menuList } = this.$store.state.menu;
    var temp = new Array();
    for (var i = 0; i < menuList.length; i++) {
      temp[i] = new Array(); // js二维数组 的赋值 要重新定义一个Arrray
      temp[i]["value"] = menuList[i]["id"];
      temp[i]["label"] = menuList[i]["title"];
      if (menuList[i].hasOwnProperty("children")) {
        var children = menuList[i].children;
        temp[i]["children"] = [];
        for (var j = 0; j < children.length; j++) {
          console.log("@@@@@", children[j].title);
          temp[i]["children"][j] = new Array();
          temp[i]["children"][j]["label"] = children[j]["title"];
          temp[i]["children"][j]["value"] = children[j]["id"];
        }
      }
    }
    this.menuArr = temp;
    //this.tableData = allMenuList;
  },
  created() {
    getAllMenuTree().then((res) => {
      console.log("@@@@@@@", this);
      console.log(res);
      if (res.code == 0) {
        this.tableData = res.data;
      }
    });
  },
  watch: {
    labelPosition: function (newVal, oldVal) {
      if (newVal == "button") {
        this.ruleForm.is_menu = 0;
      } else {
        this.ruleForm.is_menu = 1;
      }
    },
  },
  methods: {
    handleChange() {},
    showModel(type, parent) {
      this.dialogVisible = true;
      this.labelPosition = type;
      this.ruleForm.pid = parent ? parent.id : 0;
      //this.ruleForm.parent=parent?parent:"",
      this.ruleForm.parent_title = parent ? parent.title : "顶级菜单";
    },
    addMenu(type, parent) {
      this.dialogVisible = true;
      this.labelPosition = type;
      this.ruleForm.pid = parent ? parent.id : 0;
    },
    editMenu(row) {
      this.dialogVisible = true;
      this.labelPosition = "button";
      if (row.is_menu == 1) {
        this.labelPosition = "menu";
      }
      this.ruleForm = row;
    },
    // 删除菜单
    deleteMenu(item) {
      this.$confirm(`确定要删除吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {})
        .catch(() => {});
    },
    getIcon(icon) {
      this.ruleForm.icon = icon;
    },
    // 删除可操作权限
    deleteAllow(item) {
      this.$confirm(`确定要删除 ${item.name} ？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {})
        .catch(() => {});
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          console.log("@@@", this.ruleForm);
          editMenu(this.ruleForm).then((res) => {
            if (res.code === 0) {
              this.loading = false;
              this.dialogVisible = false;
              var that = this;
              getMenuList();
              var t = setTimeout(function () {
                that.reload();
                console.log("执行了");
              }, 2000);
            } else {
              this.$message = res.message;
            }
          });
        } else {
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.page-content {
  width: 100%;
  height: 100%;

  .table {
    margin-top: 15px;
  }
}
</style>
